<template>
  <div>
    <h1>ToDoList案例</h1>
    <input v-model="value" /><button @click="handleAdd" >添加</button>
    <h2>已完成 {{ finishedList.length }}</h2>
    <ul>
      <li v-for="v in finishedList" :key="v.id">
        <input type="checkbox" v-model="v.state" />
        <span>{{ v.title }}</span>
        <button @click="handleDelete(v.id)">删除</button>
      </li>
    </ul>
    <h2>未完成 {{ unfinishedList.length }}</h2>
    <ul>
      <li v-for="v in unfinishedList" :key="v.id">
        <input type="checkbox" v-model="v.state" />
        <span>{{ v.title }}</span>
        <button @click="handleDelete(v.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      todoList: [
        {
          id: 1,
          title: "任务一",
          state: true,
        },
        {
          id: 2,
          title: "任务二",
          state: true,
        },
        {
          id: 3,
          title: "任务三",
          state: false,
        },
        {
          id: 4,
          title: "任务四",
          state: false,
        },
        {
          id: 5,
          title: "任务五",
          state: false,
        },
      ],
      value: "",
    };
  },
  computed: {
    finishedList() {
      return this.todoList.filter((v) => v.state);
    },
    unfinishedList() {
      return this.todoList.filter((v) => !v.state);
    },
  },
  methods: {
    handleAdd() {
      this.todoList.push({
        id: Date.now(),
        title: this.value,
        state: false,
      });
    },
    handleDelete(id: number) {
      this.todoList = this.todoList.filter(v => v.id !== id)
    }
  },
});
</script>
